<template>
  <swiper class="index-videos" :current="swiperIndex" circular :interval="6000" :duration="500" next-margin="264rpx"
    @change="onSwiperChange">
    <swiper-item v-for="(itm, idx) in swiperList" :key="idx">
      <view class="item">
        <view class="item-body">
          <video class="video" :src="itm.url"></video>
          <!-- <image class="icon" :src="getImageSrc('static/icons/paly-icon.png')"></image> -->
          <!-- <view class="masking"></view> -->
          <!-- <view class="video-time">10:28</view> -->
        </view>
        <view :class="`item-btm two-ellipsis ${idx === swiperIndex && 'color-active'}`">
          <!-- <image class="btm-icon" :src="getImageSrc('static/icons/icon-tuijian.png')"></image> -->
          <!-- <text style="color: #9CDB14;">EXPERT</text>
          <text style="color: #144BC4;">NEW</text> -->
          <text>{{ itm.filename }}</text>
        </view>
      </view>
    </swiper-item>
  </swiper>
</template>

<script setup>
import { ref } from "vue"
import service from "@/path/service"
import { getImageSrc } from '@/path/until';
const swiperIndex = ref(0)
const swiperList = ref([])
function onSwiperChange(ev) {
  swiperIndex.value = ev.detail.current
}
service.get("api/ycg/home/homevideo").then(res => swiperList.value = res)
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
